import Card from "@/components/Card";
import Card1, { Card2 } from "@/components/Card2";
import { ChildDemo } from "../ChildDemo";
import { BrotherDemo, BrotherDemo2 } from "../brotherDemo";
import ChildToParentDemo from "../childToParentDemo";
import InputComDemo from "../inputComDemo";
import { Modal } from "../teleportDemo";
import { SuspenseDemo } from "../SuspenseDemo";
import HocDemo from "../hocDemo";
const Test: React.FC = () => {
  // 消息
  const showMessage = () => {
    window.showMessage("消息提示");
  };

  // 传递子组件
  const fnn = (params: string) => {
    console.log(params);
  };
  return (
    <div>
      <h1>组件使用测试</h1>
      <button onClick={showMessage}>消息提示</button>
      <Card title="Card组件" subTitle="Card组件子标题" content="内容" />
      <Card1 subTitle="Card组件子标题2" content="内容2，使用默认标题" />
      <Card2 content="内容3，使用默认标题和子标题">
        <div>123</div>
      </Card2>
      <ChildDemo name="childDemo1">
        <div>123</div>
        <div>34</div>
      </ChildDemo>

      <BrotherDemo />
      <BrotherDemo2 />

      <ChildToParentDemo name="labubu" callback={fnn}></ChildToParentDemo>

      <InputComDemo></InputComDemo>
      <Modal></Modal>

      <SuspenseDemo></SuspenseDemo>
      <HocDemo></HocDemo>
    </div>
  );
};

export default Test;
